<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./bootstrap.css" />
  <style>
    body{
      padding: 10px;
    }
    #app th,
    #app td {
      vertical-align: middle;
    }
  </style>
</head>
<body>
  <div id="app">
    <div class="panel panel-primary">
      <div class="panel-heading">图书管理---共 {{total}} 本书</div>
      <div class="panel-body">
        <div class="row">
          <div class="col-lg-3">
            <input :disabled="true" type="text" class="form-control" placeholder="编号" v-model="id" />
          </div>
          <div class="col-lg-3">
            <input v-focus type="text" class="form-control" placeholder="书籍名称" v-model.lazy="bookname" />
          </div>
          <div class="col-lg-1">
            <div class="input-group">
              <input :disabled="flagSub" type="button" class="form-control btn-primary" value="提交" @click="submitbookFn" />
            </div>
          </div>
        </div>
      </div>
    </div>
    <table class="table table-bordered">
      <tr>
        <th>编号</th>
        <th>书名</th>
        <th>日期</th>
        <th>操作</th>
      </tr>
      <tr v-for="item in list" :key="item.id">
        <td>{{item.id}}</td>
        <td>{{item.name}}</td>
        <td>{{item.date | dateF}}</td>
        <td>
          <button class="btn btn-primary" @click="editFn(item.id)">编辑</button>
          <button class="btn btn-danger" @click="deleteFn(item.id)">删除</button>
        </td>
      </tr>
    </table>
  </div>
  <script src="./axios.js"></script>
  <script src="./vue.js"></script>
  <script>
    axios.defaults.baseURL = 'http://127.0.0.1:3000'

    axios.interceptors.response.use(function (response) {
      return response.data
    })

    new Vue({
      el: '#app',
      data: {
        flag: false,
        flagSub: false,
        id: '',
        bookname: '',
        list: []
      },
      mounted() {
        this.getList()
      },
      methods: {
        async getList() {
          this.list = await axios.get('/books')
        },
        async submitbookFn() {
          if(this.flag === true) {  // 编辑
            const obj = await axios.put(`/books/${this.id}`, {name: this.bookname})

            this.getList()
          } else {  // 添加
            const data = await axios.post('/books', {name: this.bookname})
            if(data.status === 200) {
              this.getList()
            }
          }
          this.id = ''
          this.bookname = ''
          this.flag = false
        },
        async editFn(id) {
          this.flag = true
          const {id: bookid, name} = await axios.get(`/books/${id}`)

          this.bookname = name  
          this.id = bookid
        },
        async deleteFn(id) {
          await axios.delete(`/books/${id}`)

          this.getList()
        }
      },
      filters: {
        dateF(res) {
          const date = new Date(res)
          return date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate()
        }
      },
      directives: {
        focus: {
          inserted(el) {
            el.focus()
          }
        }
      },
      computed: {
        total() {
          return this.list.length
        }
      },
      watch: {
        async bookname(newVal, oldVal) {
          let flag = await axios.get(`books/book/${newVal}`)

          if(flag.status === 1) {
            this.flagSub = true
          } else {
            this.flagSub = false
          }
        }
      }
    })
  </script>
</body>
</html>